47 Portfolio Webpage Creation
Portfolio webpage creation individual, project, type UI,, of, · freelancer use up to practical work type creation course with.
0. Purpose and ultimate goal
Portfolio webpage creation education of objective learners of experience and Deliverables webpage with and, HTML · CSS · JavaScript or Webflow · Framer practical work tools using portfolio creation · and, · freelancer · instructor activity to use. · · of design · · portfolio using project focused with operation.
Referenced professional training patterns
- Portfolio of HTML/CSS,, GitHub Pages
- Of project, Case Study, GitHub · Netlify · Vercel
- Design portfolio course of individual, UX,, SEO basic
- HTML · CSS · JavaScript · Figma · Webflow · GitHub · Netlify based portfolio Deliverables
Beginner · 1 Day
Beginner 1 day portfolio webpage creation curriculum
Individual,, contacts, type basic portfolio webpage create.
| Category | Details | Practice methods |
|---|---|---|
| Objective 1 | Portfolio webpage of and understanding. | Development,, videoediting,, instructor portfolio comparison using organize. Hero, About, Skills, Projects, Contact, CTA with design. |
| Objective 2 | Basic HTML · CSS with creation. | Visual Studio Code in index.html and style.css, image,,. CSS, Flexbox, Grid, query basic using · type create. |
| Objective 3 | And file organize. | GitHub Pages or Netlify Drop with webpage and URL. Image, file, alt,, contacts with. |
| Platforms | HTML, CSS, Visual Studio Code, GitHub Pages, Netlify Drop, Figma, Canva, Google Drive |
|---|---|
| Instructor profile | HTML · CSS basic · type · GitHub Pages education 2years or more, portfolio feedback |
| Target learners | ,, freelancer introductory, Digital Instructor, window |
| Duration | 4-6 hours |
| Materials | , internet, Chrome, VS Code, GitHub account,, image 3 |
| Deliverables | Portfolio, HTML/CSS file, type 1, URL, |
| Assessment method | Design 25%, HTML/CSS 35%, type 20%, 10%, participation 10% |
Beginner · 3 Days
Beginner 3 days portfolio webpage creation curriculum
, project,, type, up to complete.
| Category | Details | Practice methods |
|---|---|---|
| Objective 1 | Individual and content organize. | Canva or Figma with,, with image, core, service organize. Project by problem, role, tools, course, result, Case Study with writing. |
| Objective 2 | Type portfolio. | HTML5, CSS3, Flexbox, Grid, CSS with project,, contacts. Design with 360px, 768px, 1200px and. |
| Objective 3 | And basic SEO application. | GitHub, Netlify, Vercel with and title, description, Open Graph image, favicon settings. Google Lighthouse with,, SEO and image · alt ·. |
| Platforms | HTML, CSS, JavaScript basic, Visual Studio Code, GitHub, Netlify, Vercel, Figma, Canva, Google Lighthouse |
|---|---|
| Instructor profile | Portfolio creation · type CSS · · SEO basic education 3years or more, individual design feedback |
| Target learners | , college student, freelancer, design · development · video portfolio |
| Duration | 12-18 hours |
| Materials | , internet,, with photo, GitHub account, design materials |
| Deliverables | , project 3, type webpage, URL, SEO table |
| Assessment method | 20%, 35%, type 20%, SEO · 15%, presentation 10% |
Beginner · 1 Week
Beginner 1 week portfolio webpage creation curriculum
Portfolio individual website,, of form, project with.
| Category | Details | Practice methods |
|---|---|---|
| Objective 1 | Project. | STAR and Case Study with project of problem, course, role, result, performance indicators writing. ChatGPT and Grammarly using · and project table · table. |
| Objective 2 | And of. | JavaScript basic with,, filter,. Formspree, Google Forms, Tally connect of form. |
| Objective 3 | Operation portfolio with. | GitHub Flow with management and README to project and writing. ,, OG image, personal information, application. |
| Platforms | HTML, CSS, JavaScript, VS Code, GitHub, Netlify, Vercel, Formspree, Tally, Google Forms, ChatGPT, Grammarly |
|---|---|
| Instructor profile | HTML/CSS/JS · portfolio · operation education 3years or more, · freelancer by |
| Target learners | Job seeker, freelancer, window, development · design basic learners |
| Duration | 20-30 hours |
| Materials | , internet, 3~5,, GitHub account, of form account |
| Deliverables | Project, webpage, of form, README, operation |
| Assessment method | 25%, 25%, operation 20%, · SEO 15%, presentation 15% |
Intermediate · 4 Weeks
Intermediate 4 weeks portfolio webpage creation curriculum
Portfolio · freelancer · instructor for website with creation.
| Category | Details | Practice methods |
|---|---|---|
| Objective 1 | Design and design. | Figma with,,,,, type create. Information Home, Projects, About, Services, Contact, Blog/Notes with design. |
| Objective 2 | Practice. | CSS Grid, clamp(), container query, animation, transition using completion also create. Astro, Next.js or HTML using type. |
| Objective 3 | Analysis and improvement system application. | GA4 or Plausible using,, of table design. Feedback, project order, CTA, of form improvement. |
| Platforms | Figma, HTML, CSS, JavaScript, Astro, Next.js, VS Code, GitHub, Vercel, Netlify, GA4, Plausible |
|---|---|
| Instructor profile | Design · · analysis based improvement education 4years or more, portfolio experience |
| Target learners | Freelancer, advanced, Digital Instructor, introductory, window |
| Duration | 40-60 hours |
| Materials | , portfolio, 5,, GitHub account, analysis tools account |
| Deliverables | Figma design, portfolio,, analysis tabletable, improvement |
| Assessment method | Design 25%, 35%, analysis design 15%, improvement 15%, presentation 10% |
Advanced · 8 Weeks
Advanced 8 weeks portfolio webpage creation curriculum
Portfolio creation individual, content operation, type creation education with complete.
| Category | Details | Practice methods |
|---|---|---|
| Objective 1 | Individual website complete. | Service by, table project, service,, of design. , email, personal information guide, copyright table, performance indicators table complete. |
| Objective 2 | CMS and content operation design. | Webflow CMS, Notion CMS, Markdown Blog, Sanity using · project create. Content, rules, image, project documentation. |
| Objective 3 | Portfolio creation education and system create. | ,, freelancer, instructor portfolio creation course by objective · practice · assessment with design. ,, website table, manual, guide creation. |
| Platforms | Webflow CMS, Notion, Markdown, Sanity, GitHub, Vercel, Netlify, Figma, Google Analytics, Canva |
|---|---|
| Instructor profile | Individual · CMS · · curriculum development 5years or more, portfolio presentation |
| Target learners | Digital Instructor course, freelancer creation, portfolio map, window |
| Duration | 80-120 hours |
| Materials | , or account,, materials, education design |
| Deliverables | Individual website, CMS operation, content, document, curriculum |
| Assessment method | 30%, CMS 20%, document 20%, curriculum 20%, presentation 10% |